<template>
  <div class="map">
    <div id="container"></div>
  </div>
</template>
<script>
import { getMap } from '@/utils/map'

export default {
  data() {
    return {
      AMap: null
    }
  },
  async mounted() {
    let AMap = await getMap()
    let map = new AMap.Map('container', {
      center: [107.943579, 30.131735],
      zoom: 7
      // zoomEnable: false,
      // dragEnable: false
    })
    this.$api.axios('https://a.amap.com/jsapi_demos/static/geojson/chongqing.json').then((res) => {
      let geo = new AMap.GeoJSON({
        geoJSON: res,
        getPolygon:(geojson, lnglats)=>{
           // 计算面积
          var area = AMap.GeometryUtil.ringArea(lnglats[0])
          return new AMap.Polygon({
            extData:geojson.properties.id,
            path:lnglats,
            fillColor:'#ccc',
            strokeColor:'yellow',
            strokeOpacity:1,
            strokeWeight:1,
            cursor:'pointer',
          })
        }
      })
      geo.on('click',(e)=>{
        console.log(e)
      })
         var marker = new AMap.Marker({
      position: new AMap.LngLat(107.943579, 30.131735),
      title: '国家超级计算广州中心越秀分中心'
    })
     var marker2 = new AMap.Marker({
      position: new AMap.LngLat(105.05, 30.131),
      title: '国家超级计算广州中心越秀分中心'
    })
    // map.add(marker)
    geo.addOverlays([marker,marker2])
    let arr=geo.getOverlays()
    arr.map((item,i)=>{
   
      if(i==2)  geo.removeOverlay(item)

    })
    
      let geo2 = new AMap.GeoJSON({
        geoJSON: res,
        getPolygon:(geojson, lnglats)=>{
           // 计算面积
          return new AMap.Polygon({
            zIndex:4,
            path:lnglats,
            fillColor:'transparent',
            strokeColor:'lightblue',
            strokeOpacity:1,
            strokeWeight:9,
            cursor:'pointer',
            click:function(){
              console.log(134)
            }
          })
        }
      })
      geo.setMap(map)
      geo2.setMap(map)
    })
  }
  // async mounted() {
  //   let AMap = await getMap()
  //   let map = new AMap.Map('container', {
  //     center: [113.296622, 23.142044],
  //     zoom: 15
  //     // zoomEnable: false,
  //     // dragEnable: false
  //   })
  //   let name = 'ccc'
  //   var marker = new AMap.Marker({
  //     position: new AMap.LngLat(113.296622, 23.142044), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  //     title: '国家超级计算广州中心越秀分中心'
  //   })
  //   map.add(marker)
  //   // <div onclick={aa}>ssa</div>
  //   let el = getEl2(
  //     <div class="sb">
  //       <demo sss={bbb} name={name} />
  //       {new Array(4).fill().map((item,i)=><div>第{i}个</div>)}
  //       <div onclick={close} class="close">
  //         X
  //       </div>
  //     </div>
  //   )
  //   function aa() {
  //     console.log(11)
  //   }
  //   function bbb(val) {
  //     console.log(val)
  //   }

  //   var infoWindow = new AMap.InfoWindow({
  //     //创建信息窗体
  //     // isCustom: true, //使用自定义窗体
  //     // content: `<div>国家超级计算广州中心越秀分中心<br></div>`,
  //     isCustom: true,
  //     content: el,
  //     offset: new AMap.Pixel(0, -25)
  //   })
  //   const open = () => {
  //     infoWindow.open(map, [113.296622, 23.142044]) //打开信息窗体
  //   }
  //   function close() {
  //     map.clearInfoWindow()
  //   }
  //   open()
  //   // setTimeout(() => {
  //   //   document.querySelector('.amap-info-content').style.padding='0px'

  //   // }, 0);
  //   marker.on('click', open)
  // }
}
</script>
 
<style lang="less" scoped>
.map {
  width: 100%;
  height: 500px;
  div {
    width: 100%;
    height: 100%;
  }
}

.sb {
  width: 500px !important;
  height: 300px !important;
  background: lightblue;
  position: relative;
  div {
    width: auto;
    height: auto;
  }
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #000;
    cursor: pointer;
    font-size: 24px;
  }
}
</style>